<template>
    <div class="flexWrap" style="margin-left: 20px">
        <div class="info flexWrap">
            <div class="bg" :style="{'background-color':brief.bg}"></div>
            <div class="flexWrap w-px400">
                <div class="name">{{brief.name}}</div>
                <div class="">
                    <div class="desc">负责人：{{brief.leaderName}}</div>
                    <div class="desc">参与人：{{brief.partners}}</div>
                    <div class="desc">创建于：{{brief.createAtStr}}</div>
                </div>
            </div>
        </div>
        <div class="flexWrap">
            <div class="static-view">
                <div class="static-title">项目需求统计</div>
                <div class="static-item">
                    <div class="t">总数</div>
                    <div class="v">{{brief.demand.total}}</div>
                </div>
                <div class="static-item">
                    <div class="t">已完成</div>
                    <div class="v">{{brief.demand.done}}</div>
                </div>
                <div class="static-item">
                    <div class="t">处理中</div>
                    <div class="v">{{brief.demand.todo}}</div>
                </div>
                <div class="static-item">
                    <div class="t">已废弃</div>
                    <div class="v">{{brief.demand.discard}}</div>
                </div>
            </div>

            <div class="static-view">
                <div class="static-title">项目任务统计</div>
                <div class="static-item">
                    <div class="t">总数</div>
                    <div class="v">{{brief.job.total}}</div>
                </div>
                <div class="static-item">
                    <div class="t">已完成</div>
                    <div class="v">{{brief.job.done}}</div>
                </div>
                <div class="static-item">
                    <div class="t">处理中</div>
                    <div class="v">{{brief.job.todo}}</div>
                </div>
                <div class="static-item">
                    <div class="t">已废弃</div>
                    <div class="v">{{brief.job.discard}}</div>
                </div>
            </div>

            <div class="static-view">
                <div class="static-title">测试任务统计</div>
                <div class="static-item">
                    <div class="t">总数</div>
                    <div class="v">{{brief.case.total}}</div>
                </div>
                <div class="static-item">
                    <div class="t">已完成</div>
                    <div class="v">{{brief.case.done}}</div>
                </div>
                <div class="static-item">
                    <div class="t">处理中</div>
                    <div class="v">{{brief.case.todo}}</div>
                </div>
                <div class="static-item">
                    <div class="t">已废弃</div>
                    <div class="v">{{brief.case.discard}}</div>
                </div>
            </div>

            <div class="static-view">
                <div class="static-title">BUG统计</div>
                <div class="static-item">
                    <div class="t">总数</div>
                    <div class="v">{{brief.bug.total}}</div>
                </div>
                <div class="static-item">
                    <div class="t">已完成</div>
                    <div class="v">{{brief.bug.done}}</div>
                </div>
                <div class="static-item">
                    <div class="t">处理中</div>
                    <div class="v">{{brief.bug.todo}}</div>
                </div>
                <div class="static-item">
                    <div class="t">已废弃</div>
                    <div class="v">{{brief.bug.discard}}</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: "project-edit",
    props: {
        info: {
            type: Object
        },
        complete: {
            type:Function
        }
    },
    data() {
        return {
            statusAry: [{n:'正常',v:1},{n:'已完成',v:2},{n:'已废弃',v:-1}],
            brief: {
                id: '', name:"", demand:{}, job:{}, case:{}, bug:{}
            },
        };
    },
    components: {

    },
    created() {
        this.fetchInfo()
    },
    methods: {
        fetchInfo() {
            this.request.get({
                url: "project.brief",
                data: {id:this.info.id}
            }).then(res => {
                res = res.result
                res.partners = ""
                if (res.userAry) {
                    for (let i = 0; i < res.userAry.length; i++) {
                        let u = res.userAry[i]
                        if (u.name) {
                            if (u.id == res.leader) { res.leaderName = u.name }
                            res.partners += u.name
                            if (i + 1 < res.userAry.length) {
                                res.partners += "、"
                            }
                        }
                    }
                }
                res.createAtStr = this.utils.timeStr(res.createAt, "Y-M-D")
                this.brief = res
            }, res => {
                this.$message.error(res.msg || '获取数据失败');
            })
        },
    },
};
</script>
<style scoped lang="scss">
.info {
    margin-bottom: 30px; width: 100%;

    .bg {width: 80px; height: 80px; margin-right: 10px; border-radius: 10px}
    .name {
        margin:5px 0; width: 100%; line-height: 20px; font-size: 14px; color: #333333;
    }
    .desc {
        width: 100%; line-height: 18px; font-size: 12px; color: #888888;
    }
}

.static-view {
    width: 120px;
    display: flex; flex-wrap: wrap; justify-content:flex-start;

    .static-title { width: 100%; line-height: 20px; font-size: 13px; font-weight: bold; color:#333333; margin-bottom: 15px }
    .static-item {
        width: 100%;
        display: flex; flex-wrap: wrap; justify-content:flex-start;

        .t {width: 40px; font-size: 12px; color: #888888; line-height: 30px}
        .v {width: 40px; font-size: 20px; font-weight: bold; color: #333333; line-height: 30px; margin-left: 10px}
    }
}
</style>
